Render As You FetchとThe five UI states
ユーザー体験を最適化するなら
パターンごとにPresenterを用意すれば良いので設計もシンプルになる
親が子のクエリの詳細を知らないですむ
進化に対応できるし、設計を段階的に進められる
ロジックの後方互換性を保ったままViewを最適化できる
並列リクエストやキャッシュ先読みなどのパフォーマンスチューニングが容易
設計判断のポイント
非同期処理と幅、高さの指定をどこでハンドリングしたいか
code:tsx
type ArticlesProps = {
height: number
width: number
}
// Suspenseを利用したSkeleton UI
const Loader = (props: ArticlesProps) => {
return (
<SomeErrorBoundary>
<React.Suspense fallback={<Skeleton height={props.height} width={props.width} />}>
<Articles {...props}>
</React.Suspense>
</ErrorBoundary>
)
}
const Articles = (props: ArticlesProps) => {
// render as you fetch
const articles = useArticles()
return (
// 高さ, 幅をSkeletonと一致させないとレイアウトシフトが起こる
<AwesomeAnimationBox height={props.height} width={props.width}>
{articles.map(/*=*/)}
</AwesomeAnimationBox>
)
}
export { Loader as Articles}
---
// 親ではこんな感じに
<Articles height={80} width={80}/>
koushisa.iconの所感
段階的に戦略を切り替えるとよさそう
最初
理由
プロダクト立ち上げ期に細かくハンドリングしたいモチベーションが経験上ない
サッと作ってシュッと捨てれる方が嬉しい
コンポーネントを増やすか、移動させるだけでいい
既存実装へのアドオンで済む